@import './variable.scss';

::v-deep .broadcast-dialog {
  height: 70%;
  cursor: default;
  background-color: #1a4969;
  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(106)});
    .search-input {
      margin-bottom: px(10);
      font-size: px(14);
      .el-input__inner {
        border-radius: px(5);
        height: px(32);
        line-height: px(32);
        font-size: px(14);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
      .el-input__icon.el-icon-search{
        line-height: px(32)
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: px(10);
  }
  .el-table {
    font-size: px(14);
    td {
      border-bottom: 1px solid #2e67a8;
    }
    tr:hover > td {
      background-color: #2f6b8d;
    }
    .cell{
      line-height: px(23);
    }
    background-color: #1a4969;
    .table-herder-custom {
      background-color: #2e67a8;
      color: #fff;
    }
    .table-cell-custom {
      background-color: #172a47;
      color: #fff;
      .el-link {
        color: #fff;
        margin-left: px(20);
        font-size: px(12);
        &:hover {
          color: #06f7bb;
        }
      }
    }
    ::v-deep .el-table__body tr.current-row > td {
      background: #6bb5e6 !important;
    }
    .el-checkbox{
      font-size: px(14);
      .el-checkbox__inner{
        height: px(14);
        width: px(14);
        &::after{
          height: px(7);
          width: px(3);
          top:px(1);
          left:px(4)
        }
      }
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
      opacity: 0.96;
      .el-dialog__body {
        padding-right: px(50);
      }
      .el-dialog__footer {
        position: absolute;
        bottom: 0;
        right: px(30);
      }
      .back-to-list {
        color: #fff;
        height: px(22);
        width: px(22);
      }
      .el-form {
        .el-form-item__error {
          font-size: px(12);
          line-height: px(20);
          padding: 0;
        }
        .el-form-item{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          margin-bottom: px(22);
          margin-right: px(10);
        }
        .el-form-item__label,.el-form-item__content {
          color: #fff;
          height: px(32);
          line-height: px(32);
          font-size: px(14);
        }
        .el-form-item__label{
          width: px(150);
          white-space: nowrap;
        }
        .el-form-item__content{
          width: 100%;
          display: flex;
        }
        .el-input__inner {
          border-radius: px(5);
          height: px(32);
          line-height: px(32);
          font-size: px(14);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
        .el-textarea__inner {
          border-radius: px(5);
          font-size: px(14);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
        .upload-file{
          margin-left: px(10);
          .el-button{
            height: px(32) !important;
            line-height: px(32) !important;
            font-size: px(12) !important;
            width: px(80) !important;
          }
        }
      }

      .el-dialog__footer{
        padding-bottom: px(26);
      }
      
    }

    .trial-box {
      position: absolute;
      left: calc(50% - #{px(100)});
      top: calc(50% - #{px(50)});
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: px(5);
      width: px(200);
      height: px(100);
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
        .trial-txt{
          font-size: px(14);
          margin-left: px(10);
        }
      }
      .row-loading{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
      }
      .row-btn{
        margin-top: px(12);
      }
      .trial-loading {
        width: px(20);
        height: px(20);
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }

  .el-button {
    background-color: #1a4969;
    color: #fff;
    height: px(30);
    line-height: px(30);
    width: px(70);
    font-size: px(12);
    border-radius: px(5);
    padding: 0;
    &:hover {
      background-color: #409eff;
    }
  }
}
